import React, { Component, ReactElement } from 'react'
import Markdown from 'react-markdown'
import gfm from 'remark-gfm'
import '../ArticleDisplay/ArticleDisplay.less'
import rehypeRaw from 'rehype-raw'
import remarkMath from 'remark-math'
import rehypeKatex from 'rehype-katex'
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
import theme from 'react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus'
import { Skeleton } from 'antd'
import 'katex/dist/katex.min.css' // `rehype-katex` does not import the CSS for you
import ImgView from '../ImgView'

interface IProps {
    content: string
    loading: boolean
}
export default class ArticleDisplay extends Component<IProps> {

    render() {
        const { loading, content } = this.props;
        return (
            <Skeleton paragraph={{ rows: 20 }} active loading={loading}>
                <Markdown
                    components={{
                        //防止表格溢出
                        table: ({ children, ...props }) => (<div className="tableDiv"><table {...props}>{children}</table></div>),
                        code({ node, inline, className, children, ...props }) {
                            const match = /language-(\w+)/.exec(className || '')
                            return !inline && match ? (
                              <SyntaxHighlighter
                                className="codeDiv"
                                // @ts-ignore
                                style={theme}
                                language={match[1]}
                                PreTag="div"
                                {...props}
                              >{String(children).replace(/\n$/, '')}</SyntaxHighlighter>
                            ) : (
                              <code className={[className, "wordBreak"].join(' ')} {...props}>
                                {children}
                              </code>
                            )
                          },
                          a: ({ className, ...props }) => {
                            return <a className={["wordBreak", className].join(' ')} {...props}></a>
                          },
                          img: ({ src, alt, className, children, node,...props }) => 
                            (<ImgView 
                                className = {["illustration", className].join(' ')}
                                src={typeof src == 'string' ? src : ''} 
                                intro={typeof alt == 'string' ? alt : ''} 
                                {...props} />)

                        }}
                    // linkTarget="_blank" // TODO 这里如果用_blank，打开所有链接都会开新窗口，不能实现目录页面内跳转
                    remarkPlugins={[[gfm, { singleTilde: false }], remarkMath]}
                    rehypePlugins={[rehypeRaw, rehypeKatex]}
                    className='articleContainer'
                >
                    {content}
                </Markdown>
            </Skeleton>
        )
    }
}
